<template>
	<div class="app-main-content-box">
		<!-- top -->
		<div><app-main-title title="添加卡券" /></div>

		<!-- 列表 -->
		<div>
			<el-row v-if="list.length > 0" :gutter="30">
				<el-col v-for="item in list" :key="item.type" :xs="12" :sm="8" :md="8" :lg="8" :xl="6">
					<el-card :body-style="{ padding: 0 }" class="box-card" shadow="hover" @click.native="jumpAdd(item)">
						<div class="card-info">
							<div class="info-icon"><el-image :src="'static/icon/coupon/' + item.icon + '.png'" fit="fill" /></div>
							<div class="info-right">
								<div class="type app-line-one">{{ item.name }}</div>
								<div class="describe app-line-two">{{ item.description }}</div>
							</div>
						</div>
						<div class="btn-group" />
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			// 配置
			// 状态
			// 数据
			list: [
				{
					source: 'coupon',
					type: 'cash',
					name: '代金券',
					description: '使用时抵扣部分金额，支持多张叠加使用',
					icon: 'i-coupon-cash'
				},
				{
					source: 'coupon',
					type: 'discount',
					name: '折扣券',
					description: '使用时按折扣计算抵扣金额，支持最大抵扣上限',
					icon: 'i-coupon-discount'
				},
				{
					source: 'coupon',
					type: 'exchange',
					name: '兑换券',
					description: '只支持核销，用于一些兑换场景，不支持线上订单核销',
					icon: 'i-coupon-exchange'
				},
				// {
				//   source: 'coupon',
				//   type: 'cash_wx_pay',
				//   name: '代金券(微信支付券)',
				//   description: '打通微信支付生态，用户微信支付时自动抵扣',
				//   icon: 'i-coupon-cash_wx_pay'
				// },
				// {
				//   source: 'coupon',
				//   type: 'cash_wx_busi',
				//   name: '代金券(微信商家券)',
				//   description: '打通微信商家券生态，自动添加到用户卡包',
				//   icon: 'i-coupon-cash_wx_busi'
				// },
				// {
				//   source: 'coupon',
				//   type: 'discount_wx_busi',
				//   name: '折扣券(微信商家券)',
				//   description: '打通微信商家券生态，自动添加到用户卡包',
				//   icon: 'i-coupon-discount_wx_busi'
				// },
				{
					source: 'card',
					type: 'times',
					name: '次卡',
					description: '顾客一次购买/领取，多次核销，长期绑定顾客',
					icon: 'i-card-times'
				},
				{
					source: 'card',
					type: 'gift',
					name: '礼品卡',
					description: '包含可消费余额，一次购买/领取支持分多次使用',
					icon: 'i-card-gift'
				}
				// {
				//   name: "权益卡",
				//   description: "顾客购买/领取获取一些特殊的权益，可用于绑客",
				//   icon: "kd/31c31d5e-3cda-42ba-b5fc-b5bb125b15f9.png",
				// },
				// {
				//   name: "会员卡",
				//   description: "吸纳会员，管理忠诚顾客群体",
				//   icon: "kd/31c31d5e-3cda-42ba-b5fc-b5bb125b15f9.png",
				// },
			]
		};
	},
	computed: {
		...mapGetters(['fileBaseUrl'])
	},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		/**
		 * 数据组
		 */
		/**
		 * 按钮组
		 */
		// 新增
		jumpAdd(item) {
			// 判断是否是服务商模式
			// 跳转券
			if (item.source === 'coupon') {
				this.$router.push({
					name: 'CardsAndOfferEditCoupon',
					query: { mode: 'add', couponType: item.type }
				});
			} else if (item.source === 'card') {
				this.$router.push({
					name: 'CardsAndOfferEditCard',
					query: { mode: 'add', cardType: item.type }
				});
			}
		}

		/**
		 * 状态组
		 */
		/**
		 * 方法组
		 */
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 卡片 */
.box-card {
	margin-bottom: 20px;
	cursor: pointer;

	.card-info {
		display: flex;
		padding: 15px;

		.info-icon {
			overflow: hidden;
			flex: 0 0 auto;
			width: 100px;
			height: 100px;
			margin-right: 15px;
			border-radius: 50%;
			border: 1px solid #e7e7e7;
		}

		.info-right {
			flex: 1 1 auto;

			.type {
				font-size: 20px;
				margin-top: 25px;
				font-weight: bold;
			}

			.describe {
				margin-top: 10px;
				font-size: 14px;
				color: $light-font-color;
			}
		}
	}
}
</style>
